<template>
	<view class="wrap" style="background-color: #f1f4f9;">
		<!-- <js-lang v-if='title' :title="title"></js-lang> -->
		<view class="search">
			<u-search placeholder="搜索商品" v-model="keywords" @custom="search" @search="search"></u-search>
		</view>
		<scroll-view class="scroll-list" scroll-y="true" @scrolltolower="loadMore">
			
			
			<view v-if="list.length">
				<!-- <view style="padding: 10px;background: #fff;" v-for="(item1, index1) in list"
					:key="index1">
					<view style="display: flex;margin-bottom: 5px;" @click="jumpDetails">
						<image class="item-menu-image" :src="'https://www.mnbtdm.com/upload/images/2023/8/245aff1f6527501.png'" mode=""></image>
						<view class="item-menu-name">
							<view style="font-weight: bold;font-size: 16px;margin-bottom: 10px;">
								蒙牛悠瑞富硒高钙羊奶粉800gX6罐sssss</view>
							<text
								style="background:  bisque ;padding: 5px;color: #ff874b;border-radius: 10px;">1件起订</text>
							<view style="text-align: right;">
								<text style="color: red;">￥</text>
								<text style="color: red;font-size: 20px;">990.00</text>
								<text>/件</text>
							</view>
						</view>
					</view>
					<view style="color: #aaa;">规格:蒙牛悠瑞富硒高钙羊奶粉800g</view>
					<view style="text-align: right;">
						<u-icon name="plus-circle" color="#00aa00" size="50"></u-icon>
					</view>
				</view> -->
					<view style="display: flex; flex-wrap: wrap; justify-content: space-between;padding: 0 10px 10px;">
				
						<view v-for="(item,index) in list" :key="index" @click="jumpDetails(item)"
							style="width: 49%; border: 1px solid #eee;border-radius: 5px;background-color: #fff; margin-bottom: 10px;font-size: 14px;">
							<view v-if="item.busType == '0'">
								<view style="width: 100%;height: 150px;padding: 10px;">
									<image style="width: 100%;height:100%;border-radius: 5px;"
										:src="vuex_config.baseUrl + item.picUrl" mode="aspectFit"></image>
								</view>
									<!--  mode="aspectFit"  -->
									<view style="padding: 5px;">
										<view style="font-weight: bold;font-size: 14px;margin-bottom: 5px;height: 38px;">{{item.cinvname}}
										</view>
										<!-- <view style="color: #aaa;">规格:{{item.cinvstd?item.cinvstd:''}}</view> -->
										<view style="margin: 5px 0;display: flex;justify-content: space-between;">
											<view
												style="display: inline-block;background:  bisque ;padding: 5px;color: #ff874b;border-radius: 5px;">
												1{{item.appUnitName}}起订</view>
												<u-icon name="shopping-cart" :size="50" color="#1296db"></u-icon>
										</view>
										<view>
											<text style="color: red;font-size: 20px;">￥{{item.appPrice?item.appPrice:'暂无单价'}}</text>
											<text>/{{item.appUnitName}}</text>
										</view>
									</view>
							</view>
							<view v-if="item.busType == '1'">
								<view style="width: 100%;height: 150px;padding: 10px;">
									<image style="width: 100%;height: 100%;border-radius: 5px;"
										:src="vuex_config.baseUrl + item.proSell.picUrl" mode="aspectFit"></image>
								</view>
								
									<!--  mode="aspectFit"  -->
									<view style="padding: 5px;">
										<view style="font-weight: bold;font-size: 14px;margin-bottom: 5px;height: 38px;">{{item.proSell.abbName}}
										</view>
										<!-- <view style="color: #aaa;">规格:{{item.cinvstd?item.cinvstd:''}}</view> -->
										<view style="margin: 5px 0;display: flex;justify-content: space-between;">
											<view
												style="display: inline-block;background:  bisque ;padding: 5px;color: #ff874b;border-radius: 5px;">
												起订量:{{item.proSell.moq?item.proSell.moq:'1'}}</view>
												<u-icon name="shopping-cart" :size="50" color="#1296db"></u-icon>
										</view>
										<view>
											<text style="color: red;font-size: 20px;">￥{{item.proSell.fprice?item.proSell.fprice:'暂无单价'}}</text>
											<!-- <text>/{{item.proSell.basInv.appUnitName}}</text> -->
											<text>/{{item.proSell.unitName}}</text>
										</view>
										<view class="">
											<text
												style="color: #aaa;text-decoration: line-through;">（原价:￥{{ item.proSell.orgPrice?item.proSell.orgPrice:'暂无单价' }}/{{item.proSell.unitName}})</text>
										</view>
									</view>
							</view>
							
							
						</view>
				
					</view>
			</view>
			<view v-if="!list.length" style="color: #000;height: 100%;
				display: flex;justify-content: center;align-items: center;text-align: center;opacity: 0.3">
				<view>
					<image class="item-menu-image" src="/static/image/commodity.png"></image>
					<view class="">请先搜索需要的商品名</view>
				</view>
			
			</view>
			<view v-if="list.length" class="loadmore" @click="loadMore">
				<u-loadmore :status="loadStatus"></u-loadmore>
			</view>
		</scroll-view>
		
	</view>
</template>
<script>
/**
 * Copyright (c) 2013-Now http://jeesite.com All rights reserved.
 */
export default {
	data() {
		return {
			keywords: '',
			query: {
				pageNo: 1,
				pageSize: 20
			},
			list: [],
			count: 0,
			loadStatus: 'loadmore',
			title:'',
			code:''
		};
	},
	onLoad() {
		
		// this.loadList()
	},
	onShow() {
		// if (uni.getStorageSync('refreshList') === true){
		// 	uni.removeStorageSync('refreshList');
		// 	this.search('');
		// }
	},
	methods: {
		jumpDetails(item) {
			
			if(item.busType == '0'){
				uni.navigateTo({
					url: '/pages/btdm/index/order/orderDetails?item=' + JSON.stringify(item),
				})
			}
			if(item.busType == '1'){
				uni.navigateTo({
					url: '/pages/btdm/index/order/sellDetails?id=' + item.sellId,
				})
			}
		},
		loadMore() {
			this.loadStatus = "loading";
			setTimeout(() => {
				this.query.pageNo += 1;
				this.loadList();
			}, 100);
		},
		loadList() {
			// this.$u.api.shop.invList(params).then(resp => {
			// 	this.tabbar[index].foods=resp.list
			// 	this.tabbar = [...this.tabbar]
			// })
			this.$u.api.shop.invExtListData(this.query).then(res => {
				if (!res.list || res.list.length == 0){
					this.loadStatus = "nomore";
					return;
				}
				res.list = res.list.map(i=>{
					i = {...i,...i.basInv}
					return i;
				})
				this.list = this.list.concat(res.list);
				this.count = res.count;
				this.query.pageNo = res.pageNo;
				this.query.pageSize = res.pageSize;
				this.loadStatus = "loadmore";
				if(res.count == this.list.length){
					this.loadStatus = "nomore";
				}
			});
		},
		optionsClick(rowIndex, btnIndex) {
			if(btnIndex == 0) {
				let self = this;
				uni.showModal({
					title: '提示',
					content: '确认要删除该数据吗？',
					showCancel: true,
					success: function (res2) {
						if (res2.confirm) {
							let row = self.list[rowIndex];
							self.$u.api.testData.delete({id: row.id}).then(res => {
								self.$u.toast(res.message);
								if (res.result == 'true'){
									self.list.splice(rowIndex, 1);
								}
							});
						}
					}
				});
			}
		},
		search(value) {
			this.list = [];
			this.query.pageNo = 0;
			this.query['cinvname'] = value;
			this.loadList();
		},
		navTo(url) {
			uni.navigateTo({
				url: url
			});
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f8f8f8;
}
.btn-plus {
	position: absolute;
	bottom: 50rpx;
	right: 50rpx;
	z-index: 1;
	opacity: 0.6;
}
.btn-plus:hover {
	opacity: 1;
}
.item-menu-image {
		width: 150rpx;
		height: 150rpx;
	}
</style>
